<template>
  <div class="app-container home">
    <div v-if="cityList.length < 1">欢迎使用南山街道物联设备管理系统</div>
    <div class="box-parent" v-else>
      <div class="title">天天创科物联感知平台</div>
      <div class="box-header">
        <div class="address-unit">
          <el-form :inline="true" :model="queryForm" style="display: flex;">
            <el-form-item label="城市" label-width="40px">
              <el-select v-model="queryForm.city" width="80px">
                <el-option v-for="item in  cityList" :key="item.id" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="辖区" label-width="40px">
              <el-select v-model="queryForm.area" width="80px" clearable @change="changeArea">
                <el-option v-for="item in  areaList" :key="item.id" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="街道" label-width="40px" clearable>
              <el-select v-model="queryForm.street" width="80px" clearable>
                <el-option v-for="item in  streetList" :key="item.id" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" icon="refresh" @click="reloadData"></el-button>
          </el-form>
        </div>
        <div class="tips">
          AI报警时段: {{ homeTime }}
        </div>
      </div>
      <el-row class="box-h-r">
        <el-col class="box-h-c" :span="8" :lg="6"  :xl="6">
          <div class="box-h-box">
            <div class="box-h">
              <div class="left">
                <div class="vc">
                  <div class="label">摄像头：</div>
                  {{ statisticsObj.monitorCount }}
                </div>
                <div class="vc">
                  <div class="label">在线：</div>
                  {{ statisticsObj.monitorOnlineCount }}
                </div>
              </div>
              <div class="right piePass">
                <el-progress type="circle" class="custom-progress" :percentage="statisticsObj.monitorRate"
                             :stroke-width="strokeWidth">
                  <template #default="{ percentage }">
                    <div class="percentage-value">{{ percentage }}%</div>
                    <div class="percentage-label">在线率</div>
                  </template>
                </el-progress>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box-h-c" :span="8" :lg="6"  :xl="6">
          <div class="box-h-box">
            <div class="box-h">
              <div class="left">
                <div>
                  AI模型准确率
                </div>
              </div>
              <div class="right piePass">
                <el-progress type="circle" class="custom-progress" :percentage="homeAi" :stroke-width="strokeWidth">
                  <template #default="{ percentage }">
                    <div class="percentage-value">{{ percentage }}%</div>
                    <div class="percentage-label">准确率</div>
                  </template>
                </el-progress>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box-h-c" :span="8" :lg="6"  :xl="6">
          <div class="box-h-box">
            <div class="box-h">
              <div class="left">
                <div class="vc">
                  <div class="label">读卡器：</div>
                  {{ statisticsObj.readerCardCount }}
                </div>
                <div class="vc">
                  <div class="label">在线：</div>
                  {{ statisticsObj.readerCardOnlineCount }}
                </div>
              </div>
              <div class="right piePass">
                <el-progress type="circle" class="custom-progress" :percentage="statisticsObj.readerCardRate"
                             :stroke-width="strokeWidth">
                  <template #default="{ percentage }">
                    <div class="percentage-value">{{ percentage }}%</div>
                    <div class="percentage-label">在线率</div>
                  </template>
                </el-progress>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box-h-c" :span="8" :lg="6"  :xl="6" >
          <div class="box-h-box">
            <div class="box-h" style="position: relative">
              <el-date-picker  :disabled-date="disabledPastMonthDay" @change="changeDutyDate" :clearable="false"
                              style="position: absolute;top:-16px;left: -16px;z-index: 9999999;width: 120px"
                              v-model="dutyDate" value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD" type="date"></el-date-picker>
              <div class="left">
                <div class="vc">
                  <div class="label" style="width: 100px;">督导员总数：</div>
<!--                  {{ statisticsObj.readerCardCount }}-->
                  {{ dutyCount.totalCount }}
                </div>
                <div class="vc">
                  <div class="label" style="width: 100px;">督导员在岗：</div>
<!--                  {{ statisticsObj.readerCardOnlineCount }}-->
                  {{ dutyCount.count }}
                </div>
              </div>
              <div class="right piePass">
                <el-progress type="circle" class="custom-progress" :percentage="dutyCount.rate"
                             :stroke-width="strokeWidth">
                  <template #default="{ percentage }">
                    <div class="percentage-value">{{ percentage }}%</div>
                    <div class="percentage-label">在岗率</div>
                  </template>
                </el-progress>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>


      <el-row class="box-h-r">
        <el-col class="box-h-c" style="padding-right: 0;" :span="24">
          <div class="box-h-box">
            <div class="box-h" style="position: relative;">
              <el-date-picker :disabled-date="disabledPastMonth" @change="changeMonth" :clearable="false"
                              style="position: absolute;top:-12px;right: -14px;z-index: 9999999;width: 120px"
                              v-model="month" value-format="YYYY-MM"
                              format="YYYY-MM" type="month"></el-date-picker>
              <echart-bar ref="echartBarRef"></echart-bar>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="box-h-r">

        <el-col class="box-h-c" :span="12">
          <div class="box-h-box">
            <div class="box-h">
              <echart-map ref="echartMapRef"></echart-map>
            </div>
          </div>
        </el-col>
        <el-col class="box-h-c" :span="12">
          <div class="box-h-box">
            <div style="font-size: 20px;font-weight: 800;text-align: center;padding-bottom: 10px;margin-top: -10px;">实时案件列表</div>
            <el-table height="412" :data="eventList">
              <el-table-column label="社区" prop="community" align="center"></el-table-column>
              <el-table-column label="小区" prop="residentialName" align="center"></el-table-column>
              <el-table-column label="事件类型" prop="eventTypeStr" align="center"></el-table-column>
              <el-table-column label="报警时间" prop="eventBeginTime" width="200px" align="center"></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>


    <div class="el-login-footer">
      <a target="_blank" href="https://beian.miit.gov.cn/">
        <span style="padding-right: 10px;">Copyright © 2024-2029 天天创科</span>
        粤ICP备2024294225号
      </a>
    </div>
  </div>
</template>

<script setup name="Index">
import {getConfigKey} from "@/api/system/config";

const homeTime = ref("")
const homeAi = ref(90)
getConfigKey("home-time").then(res => {
  homeTime.value = res.msg;
})
getConfigKey("home-ai").then(res => {
  homeAi.value = res.msg;
})
import EchartBar from '@/components/Echart/Bar.vue'
import EchartMap from '@/components/Echart/Map.vue'

defineComponent({
  EchartBar,
  EchartMap
})
import {addressUnitList, statistics, listByDate, listDutyCountByDate} from '@/api/homePage'

const statisticsObj = ref({
  monitorCount: 0,
  readerCardCount: 0,
  monitorRate: 0,
  monitorOnlineCount: 0,
  readerCardOnlineCount: 0,
  readerCardRate: 0,
})
const eventList = ref([])

function getStatistics() {
  statistics(queryForm.value).then(res => {
    let monitorCount = res.data.monitorCount;
    let readerCardCount = res.data.readerCardCount;
    monitorCount=monitorCount <= 0 ? 0 : ((res.data.monitorOnlineCount / res.data.monitorCount).toFixed(2)) * 100;
    readerCardCount= readerCardCount <= 0 ? 0 : ((res.data.readerCardOnlineCount / res.data.readerCardCount).toFixed(2)) * 100,
    statisticsObj.value = {
      monitorCount: res.data.monitorCount,
      monitorOnlineCount: res.data.monitorOnlineCount,
      monitorRate: toNumberInt(monitorCount),
      readerCardCount: res.data.readerCardCount,
      readerCardOnlineCount: res.data.readerCardOnlineCount,
      readerCardRate: toNumberInt(readerCardCount),
    }
    eventList.value = res.data.events;
    echartMapRef.value.initMapChart(queryForm.value)
  })

}


const month = ref();
const now = new Date();
let m = now.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let y = now.getFullYear();
month.value = y + "-" + m;

function changeMonth(v) {
  listByDate(month.value,queryForm.value).then(res => {
    const xData = [];
    const yData = [];
    res.data.forEach(item => {
      let name = item.community.replace('社区', '');
      xData.push(name);
      yData.push({
        name,
        value: item.eventCount
      });
    })
    echartBarRef.value.initChart(xData, yData)
  });
}


const disabledPastMonth=(time) => {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  var currentdate = year.toString()+"-" + month.toString()
  var timeyear = time.getFullYear()
  var timemonth = time.getMonth() + 1
  if (timemonth >= 1 && timemonth <= 9) {
    timemonth = '0' + timemonth
  }
  var timedate = timeyear.toString() +"-"+ timemonth.toString()
  return currentdate < timedate
};


const disabledPastMonthDay =(time)=> {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  var day = date.getDate();
  if(day <10){
    day='0' +day;
  }
  var currentdate = year.toString() +'-' + month.toString() +'-' + day.toString()
  var timeyear = time.getFullYear()
  var timemonth = time.getMonth() + 1
  if (timemonth >= 1 && timemonth <= 9) {
    timemonth = '0' + timemonth
  }
  var timeday = time.getDate();
  if(timeday <10){
    timeday='0' +timeday;
  }
  var timedate = timeyear.toString()+'-' + timemonth.toString()+'-'+timeday.toString()
  console.log(timeday,currentdate);
return currentdate <= timedate;
};


const queryForm = ref({
  city: "",
  area: "",
  street: ""
})
const cityList = ref([]);
const areaList = ref([]);
const streetList = ref([]);
const streetListAll = ref([]);
const getCityAreaStreet = () => {
  addressUnitList().then(res => {
    cityList.value = res.data.cityList;
    areaList.value = res.data.areaList;
    streetListAll.value = res.data.streetList;
    if (cityList.value.length > 0) {
      queryForm.value.city = cityList.value[0].id;
    }
    // if (areaList.value.length > 0) {
    //   queryForm.value.area = areaList.value[0].id;
    // }
    // if (streetList.value.length > 0) {
    //   queryForm.value.street = streetList.value[0].id;
    // }

  })
}
getCityAreaStreet()

function changeArea() {
  queryForm.value.street = "";
  const streetArr = [];
  streetListAll.value.forEach(item => {
    if (item.parentId == queryForm.value.area) {
      streetArr.push(item);
    }
  });
  streetList.value = streetArr;

}


const strokeWidth = ref(18)
const percentage = ref(80)
const echartBarRef = ref();
const echartMapRef = ref();
const activedReload = ref(false)
onMounted(() => {
  getStatistics()
  setTimeout(()=>{
    changeMonth()
    activedReload.value=true;
  },1000)
})

function reloadData() {
  getStatistics();
  changeMonth();
  changeDutyDate();
}
onActivated(()=>{
  if(activedReload.value){
    reloadData();
  }
})

const dutyDate=ref();
const dutyCount=ref({
   count:0,
  totalCount:0,
   rate: 0
})
let yesterday=new Date();
yesterday.setDate(now.getDate() - 1)
let ym=yesterday.getMonth()+1;
if(ym < 10){
  ym="0"+ym;
}
let yy=yesterday.getFullYear();
let date = yesterday.getDate();
date=date > 9?date:'0'+date;
dutyDate.value = yy + "-" + ym+"-"+date;
function changeDutyDate(){
  console.log(date);
  listDutyCountByDate(dutyDate.value,queryForm.value).then(res=>{
      dutyCount.value.totalCount=res.data.totalCount;
      dutyCount.value.count=res.data.count;
      const rate=res.data.count <= 0 ? 0 : ((res.data.count / res.data.totalCount).toFixed(2)) * 100;
      dutyCount.value.rate =toNumberInt(rate);
  })
}

changeDutyDate();

function toNumberInt(s){
  console.log(s)
  return Math.floor(s);
}

</script>

<style scoped lang="scss">
.home {
  background: #f5f7f9;
  min-height: calc(100vh - 80px);

  .box-parent {
    padding-bottom: 20px;
    .box-header {
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      margin-top: 10px;
      border: solid #e4e7ed 1px;
    }

    .box-h-r {
      margin-top: 10px;

      .box-h-c {
        &:nth-child(2) {
          padding-left: 5px;
          padding-right: 5px;
        }

        &:nth-child(3) {
          padding-left: 10px;
        }

        &:nth-child(4) {
          padding-left: 10px;
        }

        &:first-child {
          padding-right: 10px;
        }

        .box-h-box {
          background: #fff;
          border: solid #e4e7ed 1px;
          padding: 20px;
          border-radius: 6px;

          .box-h {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .left {
              .vc {
                line-height: 30px;
                display: flex;

                .label {
                  width: 70px;
                  display: flex;
                  justify-content: right;
                }
              }

            }
          }
        }
      }
    }

    .box-chart-r {
      margin-top: 10px;

      .box-chart-c {
        &:nth-child(2) {
          padding-left: 5px;
        }

        &:first-child {
          padding-right: 5px;
        }

        .box-h-box {
          background: #fff;
          border: solid #e4e7ed 1px;
          padding: 20px;
          border-radius: 6px;

          .box-h {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .left {
              .vc {
                line-height: 40px;
                display: flex;

                .label {
                  width: 70px;
                }
              }

            }
          }
        }
      }
    }
  }

}


.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}


:deep(.el-form-item__content) {
  min-width: 100px;
}

.box-parent {
  .title {
    text-align: center;
    width: 100%;
    font-size: 20px;
    font-weight: 800;
  }

  .box-header {
    .tips {
      font-weight: 700;
      font-size: 14px;
      color: #606266;
    }
  }
}

.percentage-value {
  color: #409EFF;
  font-weight: 800;
  font-size: 20px;
}

.percentage-label {
  font-size: 12px;
  padding-top: 4px;
}

.piePass :deep() {
  path:first-child {
    stroke: #f1f1f1;
  }
}

</style>

